<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <button @click="fnCallParentVisit">访问父级组件实例</button>
      <button @click="modifyCallParent">修改父级数据按钮</button>
      <button @click="modifyCallChildren">访问子级组件实例</button>
      <button @click="modifyCallbackFn">调用子级组件函数</button>
      <button @click="modifyCallbackRef">访问子组件实例或子元素</button>
    </div>
    <inner-world ref="inner"></inner-world>
  </div>
</template>

<script>
import InnerWorld from '@/components/InnerWorld.vue'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    InnerWorld
  },
  mounted () {
  },
  methods: {
    fnCallParentVisit () {
      console.log(this.$parent)
      console.log(this.$parent.message)
    },
    modifyCallParent () {
      this.$parent.fnCallback('$parent: Welcome to Your Vue.js App')
    },
    modifyCallChildren () {
      this.$children[0].message = '$children: This is An Example'
    },
    modifyCallbackFn () {
      if (this.$children[0]) {
        this.$children[0].fnCallRoot()
      }
    },
    modifyCallbackRef () {
      this.$refs.inner.message = '$refs: 访问子组件实例或子元素'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.hello
  margin 40px 0 0
</style>
